// OrderInfoCard.tsx
import React from 'react';
import { Card, Table, Typography, Divider, Button, Space } from 'antd';
import type { OrderInfo } from '../type/types';

const { Title, Text } = Typography;

const OrderInfoCard: React.FC<{ data: OrderInfo }> = ({ data }) => {
  // 委托人信息列
  const consignorColumns = [
    {
      title: '委托方',
      dataIndex: 'company',
      key: 'company',
    },
    {
      title: '委托人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '提货地址',
      dataIndex: 'pickupAddress',
      key: 'pickupAddress',
    },
    {
      title: '提货联系人',
      dataIndex: 'pickupContact',
      key: 'pickupContact',
    },
    {
      title: '联系电话',
      dataIndex: 'pickupContactPhone',
      key: 'pickupContactPhone',
    },
  ];

  // 收货人信息列
  const consigneeColumns = [
    {
      title: '收货方',
      dataIndex: 'company',
      key: 'company',
    },
    {
      title: '收货人',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '收货地址',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  // 货物信息列
  const goodsColumns = [
    {
      title: '货名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '规格型号',
      dataIndex: 'specification',
      key: 'specification',
    },
    {
      title: '总包装',
      dataIndex: 'packaging',
      key: 'packaging',
    },
    {
      title: '总数量',
      dataIndex: 'quantity',
      key: 'quantity',
    },
    {
      title: '总重量kg',
      dataIndex: 'weight',
      key: 'weight',
    },
    {
      title: '总体积 m³',
      dataIndex: 'volume',
      key: 'volume',
    },
  ];

  // 运费信息列
  const freightColumns = [
    {
      title: '单价',
      dataIndex: 'unitPrice',
      key: 'unitPrice',
    },
    {
      title: '总里程(km)',
      dataIndex: 'totalDistance',
      key: 'totalDistance',
    },
    {
      title: '运输费（¥）',
      dataIndex: 'transportFee',
      key: 'transportFee',
    },
    {
      title: '其它费用(¥)',
      dataIndex: 'otherFees',
      key: 'otherFees',
    },
    {
      title: '额外费用(¥)',
      dataIndex: 'additionalFees',
      key: 'additionalFees',
    },
    {
      title: '费用总计(¥)',
      dataIndex: 'totalFee',
      key: 'totalFee',
    },
  ];

  // 计算货物合计
  const goodsData = [...data.goods];
  if (goodsData.length > 1) {
    const total = {
      name: '',
      specification: '合计',
      packaging: '',
      quantity: goodsData.reduce((sum, item) => sum + item.quantity, 0),
      weight: goodsData.reduce((sum, item) => sum + item.weight, 0),
      volume: goodsData.reduce((sum, item) => sum + item.volume, 0),
    };
    goodsData.push(total);
  }

  return (
    <Card bordered={false}>
      <Title level={4}>订单号 {data.orderNumber}</Title>
      <Text>合同编号 {data.contractNumber}</Text>
      
      <Divider />
      
      <Title level={5}>运输单号 {data.shippingNumber}</Title>
      
      <Divider />
      
      <Title level={5}>委托人信息</Title>
      <Table
        columns={consignorColumns}
        dataSource={[data.consignor]}
        pagination={false}
        bordered
        size="small"
      />
      
      <Divider />
      
      <Title level={5}>收货人信息</Title>
      <Table
        columns={consigneeColumns}
        dataSource={[data.consignee]}
        pagination={false}
        bordered
        size="small"
      />
      
      <Divider />
      
      <Title level={5}>计划时间</Title>
      <div style={{ marginBottom: 16 }}>
        <Text strong>计划数据时间</Text>
        <br />
        <Text>{data.plannedTimes.pickupTime}</Text>
        <br />
        <Text strong>计划到货时间</Text>
        <br />
        <Text>{data.plannedTimes.deliveryTime}</Text>
      </div>
      
      <Divider />
      
      <Title level={5}>货物信息</Title>
      <Table
        columns={goodsColumns}
        dataSource={goodsData}
        pagination={false}
        bordered
        size="small"
      />
      
      <Divider />
      
      <Title level={5}>实际运费</Title>
      <Table
        columns={freightColumns}
        dataSource={[data.freight]}
        pagination={false}
        bordered
        size="small"
      />
      
      <Divider />
      
      <Title level={5}>备注</Title>
      <Text>{data.remarks}</Text>
      
      <Divider />
      
      <Space>
        <Button type="primary">返回</Button>
        <Button type="primary">确认申请</Button>
      </Space>
    </Card>
  );
};

export default OrderInfoCard;